<template>
  <div class="block-box">
    <div class="detail-map">
      <h3 class="task-title">
        航线地图 <img class="icon" :src="getImageUrl('leftbg10.png')" alt="" />
      </h3>
      <div class="map_box">
        <div class="map" id="map-container"></div>
      </div>
    </div>
    <div class="detail-air-box">
      <h3 class="task-title">飞行组大队<img class="icon" :src="getImageUrl('leftbg10.png')" alt="" /></h3>
      <div class="detail-air">
        <img class="detail-icon" src="../../../../../assets/u6260.png" alt="" />
        <p class="detail-status">
          <CircleCheck style="width: 2vh;height: 2vh;margin-right: 0.5vh;" />{{ airlineData.status }}
        </p>
        <p class="detail-name">{{ airlineData.Id }}</p>
        <p class="detail-num">{{ airlineData.number }}</p>
      </div>
      <div class="detail-air">
        <img class="detail-header" src="../../../../../assets/u3769.png" alt="" />
        <p class="detail-names">{{ airlineData.name }}</p>
        <p class="detail-adress">{{ airlineData.adress }}</p>
        <p class="detail-time">{{ airlineData.distance }}</p>
      </div>
      <ElButton class="detail-btn" @click="setFormValues">一键接管</ElButton>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElRow, ElCol, ElButton } from 'element-plus';
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
// import Hls from 'hls.js';
import { useRouter } from 'vue-router';
import { openWindow } from '@vben/utils';
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href
}
const props = defineProps({ airlineData: Object });
const router = useRouter();
const getSpan = (index) => {
  switch (props.changeViewId) {
    case 1:
      return 24;
    case 2:
      return 12;
    case 3:
      return index === 0 ? 16 : 8;
    default:
      return 8;
  }
};

// let hlsInstances: Record<number, Hls> = {};

const navToClick = () => {
  console.log('bbbbb');
  return;
  let nav = '/dashboard/dronemonitoring/detail/module/index.vue';
  if (nav?.startsWith('http')) {
    openWindow(nav);
    return;
  }
  if (nav?.startsWith('/')) {
    router.push(nav).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
};
const loadAMap = () => {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
      return;
    }
    const script = document.createElement('script');
    script.src = `https://webapi.amap.com/maps?v=2.0&key=ce77626588b7a2ee836159f48dd4a1a6`;
    script.addEventListener('load', () => resolve(window.AMap));
    script.onerror = reject;
    document.head.append(script);
  });
};
let map;
let centerlnglat;
onMounted(async () => {
  // props.droneList.forEach((item, index) => {
  //   const videoElement = document.getElementById(`video-${index}`);
  //   if (videoElement && Hls.isSupported()) {
  //     const hls = new Hls();
  //     hls.loadSource(item.streamUrl); // 假设每个无人机项都有一个 streamUrl 属性
  //     hls.attachMedia(videoElement);
  //     hls.on(Hls.Events.MANIFEST_PARSED, function () {
  //       videoElement.play();
  //     });
  //     hlsInstances[index] = hls;
  //   } else if (
  //     videoElement &&
  //     videoElement.canPlayType('application/vnd.apple.mpegurl')
  //   ) {
  //     videoElement.src = item.streamUrl; // 假设每个无人机项都有一个 streamUrl 属性
  //     videoElement.addEventListener('canplay', function () {
  //       videoElement.play();
  //     });
  //   }
  // });
  try {
    await loadAMap();
    centerlnglat = [119.904792, 30.247956]
    if (!map) {
      map = new AMap.Map('map-container', {
        zoom: 15,
        center: [119.904792, 30.247956],
        pitch: 60, // 俯仰角度
        viewMode: '3D', // 启用 3D 模式
        layers: [
          // 卫星
          new AMap.TileLayer.Satellite(),
          // 路网
          new AMap.TileLayer.RoadNet(),
        ],
      });
    }
  } catch (error) {
    console.error('地图加载失败:', error);
  }
});
onBeforeUnmount(() => {
  // Object.values(hlsInstances).forEach((hls) => {
  //   hls.destroy();
  // });
});
</script>

<style lang="scss" scoped>
.block-box {
  width: 100%;
  height: 100%;

  .task-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-family: PingFangSC, 'PingFang SC';
    font-size: 2vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        rgba(1, 34, 35, 0.2) 28%,
        rgba(7, 217, 221, 0.7) 100%);

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }
}

.detail-map {
  width: 100%;
  height: 35vh;
  background: rgb(2 19 20 / 52%);
  border: 0.01vh solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;

  .map_box {
    width: 100%;
    height: calc(31vh);
    padding: 0.5vh;

    .map {
      width: 100%;
      height: 100%;
    }
  }
}

.detail-air-box {
  margin-top: 0.5vh;
  height: 55vh;

  .detail-air {
    background-image: url('../../../../../assets/dp_wrjjkxq_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 21vh;
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFFFFF;

    .detail-icon {
      width: 20vh;
      height: 15vh;
      margin-bottom: -3vh;
      margin-top: -2vh;
    }

    .detail-header {
      width: 7vh;
      height: 7vh;
      border-radius: 50%;
      margin-top: 2vh;
    }

    .detail-status {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 1.5vh;
      color: #82D31B;
      display: flex;
      align-items: center;
    }

    .detail-name {
      margin-top: 0.8vh;
      font-size: 1.8vh;
      font-weight: bold;
    }

    .detail-num {
      margin-top: 0.8vh;
      font-size: 1.4vh;
    }

    .detail-names {
      margin-top: 1vh;
      font-size: 1.8vh;
      font-weight: bold;
    }

    .detail-adress {
      margin-top: 0.8vh;
      font-size: 1.6vh;
    }

    .detail-time {
      margin-top: 0.8vh;
      font-size: 1.2vh;
    }
  }

  .detail-btn {
    width: 100%;
    height: 6vh;
    margin-top: 1vh;
    font-size: 2vh;
    color: #fff;
    background-color: rgb(255 0 0 / 43.9%);
    border: none;
  }
}
</style>
